<template>
  <el-dialog append-to-body class="common_dialog" custom-class="reset-dialog-width" :visible.sync="visible" :title="!queryParams.id ?'添加区域' : '修改区域'" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="form" :rules="dataRule" ref="form" label-width="120px"> 
        <el-form-item label="省市" prop="areaId">
          <el-input v-model="form.city" readonly ></el-input>
          <el-cascader
            ref="areaSelect"
            :options="areaList"
            placeholder="请选择省市"
            :props="{
              value: 'id',
              label: 'name',
              lazy: true,
              lazyLoad: getNextAreaList
            }"
            @change="editCity"
            ></el-cascader>
        </el-form-item>

        <el-form-item label="街道" prop="street">
          <el-input v-model="form.street" placeholder="请输入街道" />
        </el-form-item>
        <el-form-item label="详情" prop="details">
          <el-input v-model="form.details" placeholder="请输入详情" />
        </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button :loading="confirmLoading" type="primary" @click="formSubmitHandle()">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>

import debounce from 'lodash/debounce'
import { findAreaAll } from "@/api/basic/area/area";
import {addRegion,updateRegion,getRegion} from "@/api/basic/region/region"

export default {
  data() {
    return {
      visible: false,
      form: {
        id: null,
        areaId: [],
        street: '',
        details: '',
        city: '',
      },
      confirmLoading: false,
      queryParams: {},
      citySelectName: '',
      areaList: [],//城市列表
    }
  },
  components: {
  },
  computed: {
    dataRule() {
      return {
      }

    }
  },
  created() {
    this.getAreaList({level:1})
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['form'].resetFields()
        this.reset()
        this.confirmLoading = false
        this.form.id = this.queryParams.id ? this.queryParams.id : ''
        
        this.queryParams.id ? this.getInfo() : ''
      })
    },
    // 重置表单
    reset() {
      this.form = {
        id: null,
        areaId: '',
        street: '',
        details: '',
        city: '',
      };
      console.log(this.$refs.areaSelect,"debug")
      this.$refs.areaSelect.checkedValue = []
    },
    // 获取信息
    getInfo() {
      const id = this.queryParams.id
      getRegion(id).then(response => {
        this.form = {
        id: response.data.id,
        areaId: response.data.areaId,
        street: response.data.street,
        details: response.data.details,
        city: response.data.city,}
        this.citySelectName = response.data.city
      });
    },
    // 获取area信息
    getAreaList(param){
      findAreaAll(param).then(response => {
        this.areaList = response
      })
    },
    // 及联查找懒加载
    getNextAreaList(node,resolve){
      findAreaAll({pid: node.data.id}).then(response => {
        let nodes = response;
        if(node.data.level === 2){
          nodes.map(item => {
            item.leaf = true
          })
        }
        resolve(nodes)
      })
    },
    // form设置area信息
    editCity(value){
      this.form.areaId = value[value.length - 1]
      let nodes = this.$refs.areaSelect.getCheckedNodes()[0];
      let city = '';
      for (let index = 0; index < nodes.pathLabels.length; index++) {
        const name = nodes.pathLabels[index];
         city += name + '/'
      }
      
      this.form.city = city.substring(0,city.length-1)
      
    },
    // 表单提交
    formSubmitHandle: debounce(function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.confirmLoading = true
          if (this.form.id != '') {
            updateRegion(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.visible = false
              this.confirmLoading = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.confirmLoading = false
            });
          } else {
            addRegion(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.visible = false
              this.confirmLoading = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.confirmLoading = false
            });
          }
        }
      })
    }, 1000, { 'leading': true, 'trailing': false }),

  }
}
</script>
<style lang="scss" scoped>
</style>
